<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

<div id="test"></div>

<script type="text/babel">
    //类式组件

    class Count extends React.Component {

        constructor(props) {
            console.log("Count constructor")
            super(props);

            //初始化状态
            this.state = {
                count: 0
            }
        }

        //组件将要挂载的钩子
        componentWillMount() {
            console.log("count componentWillMount")
        }

        //组件挂载完毕的钩子 --常用 一般在这个钩子中做一些初始化的事，例如开启定时器，发送网络请求，订阅消息
        componentDidMount() {
            console.log("count componentDidMount")
        }

        //组件卸载的钩子
        componentWillUnmount() {
            console.log("count componentWillUnmount")
        }

        //组件是否应该被更新 钩子
        shouldComponentUpdate() {
            console.log("count shouldComponentUpdate")
            return true;
        }

        componentWillUpdate() {
            console.log("count componentWillUpdate")
        }

        componentDidUpdate() {
            console.log("count componentDidUpdate")
        }


        add = () => {
            const {count} = this.state
            this.setState({count: count + 1})
        }

        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        //强制更新按钮
        force = () => {
            this.forceUpdate()
        }

        render() {
            console.log("count render")
            const {count} = this.state
            return (
                <div>
                    <h2>点我求和为{count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态数据，强制更新</button>
                </div>
            )
        }
    }

    class A extends React.Component {
        state = {
            carName: '宝马'
        }

        changeCar = () => {
            this.setState({carName: '奥迪'})
        }

        render() {
            return (
                <div>
                    我是A组件
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    class B extends React.Component {

        //组件将要接受新的props钩子
        componentWillReceiveProps(nextProps) {
            console.log(nextProps)
        }

        shouldComponentUpdate() {
            console.log("B shouldComponentUpdate")
            return true;
        }

        componentWillUpdate() {
            console.log("B componentWillUpdate")
        }

        componentDidUpdate() {
            console.log("B componentDidUpdate")
        }

        render() {
            return (
                <div>
                    B,接收到的车是:{this.props.carName}
                </div>
            )
        }
    }


    ReactDOM.render(<A/>, document.getElementById("test"))
</script>
</body>
</html>